<template>
	<satri-page :padding="20">
		<!-- 基础用法示例 -->
		<view class="page-demo-button">
			<satri-card label="基础用法">
				<satri-row :gutter="20">
					<!-- 默认按钮 -->
					<satri-col :span="8">
						<satri-button fill @tap="onTap">默认</satri-button>
					</satri-col>
					<!-- 主要按钮 -->
					<satri-col :span="8">
						<satri-button type="primary" fill>主要</satri-button>
					</satri-col>
					<!-- 成功按钮 -->
					<satri-col :span="8">
						<satri-button type="success" fill>成功</satri-button>
					</satri-col>
					<!-- 失败按钮 -->
					<satri-col :span="8">
						<satri-button type="error" fill>失败</satri-button>
					</satri-col>
					<!-- 警告按钮 -->
					<satri-col :span="8">
						<satri-button type="warning" fill>警告</satri-button>
					</satri-col>
					<!-- 信息按钮 -->
					<satri-col :span="8">
						<satri-button type="info" fill>信息</satri-button>
					</satri-col>
				</satri-row>
			</satri-card>

			<!-- 朴素按钮示例 -->
			<satri-card label="朴素">
				<satri-row :gutter="20">
					<!-- 主要朴素按钮 -->
					<satri-col :span="8">
						<satri-button type="primary" plain fill>主要</satri-button>
					</satri-col>
					<!-- 成功朴素按钮 -->
					<satri-col :span="8">
						<satri-button type="success" plain fill>成功</satri-button>
					</satri-col>
					<!-- 失败朴素按钮 -->
					<satri-col :span="8">
						<satri-button type="error" plain fill>失败</satri-button>
					</satri-col>
					<!-- 警告朴素按钮 -->
					<satri-col :span="8">
						<satri-button type="warning" plain fill>警告</satri-button>
					</satri-col>
					<!-- 信息朴素按钮 -->
					<satri-col :span="8">
						<satri-button type="info" plain fill>信息</satri-button>
					</satri-col>
				</satri-row>
			</satri-card>

			<!-- 不同尺寸按钮示例 -->
			<satri-card label="不同尺寸">
				<!-- 小尺寸按钮 -->
				<satri-button size="small">小</satri-button>
				<!-- 默认尺寸按钮 -->
				<satri-button size="default">默认</satri-button>
				<!-- 大尺寸按钮 -->
				<satri-button size="large">大</satri-button>
				<!-- 自定义尺寸按钮 -->
				<satri-button :height="90" :width="200" :font-size="34">90*200</satri-button>
			</satri-card>

			<!-- 图标按钮示例 -->
			<satri-card label="图标">
				<!-- 搜索图标按钮 -->
				<satri-button icon="satri-icon-search">搜索</satri-button>
				<!-- 统计图标按钮 -->
				<satri-button icon="satri-icon-chart-bar">统计</satri-button>
			</satri-card>

			<!-- 圆角按钮示例 -->
			<satri-card label="圆角">
				<!-- 默认圆角按钮 -->
				<satri-button type="primary" round>默认</satri-button>
				<!-- 普通圆角按钮 -->
				<satri-button round>默认</satri-button>
			</satri-card>

			<!-- 加载中按钮示例 -->
			<satri-card label="加载中">
				<satri-row :gutter="20">
					<!-- 默认加载中按钮 -->
					<satri-col :span="8">
						<satri-button loading fill @tap="onTap">默认</satri-button>
					</satri-col>
					<!-- 主要加载中按钮 -->
					<satri-col :span="8">
						<satri-button type="primary" fill loading>主要</satri-button>
					</satri-col>
					<!-- 成功加载中按钮 -->
					<satri-col :span="8">
						<satri-button type="success" fill loading>成功</satri-button>
					</satri-col>
					<!-- 失败加载中按钮 -->
					<satri-col :span="8">
						<satri-button type="error" fill loading>失败</satri-button>
					</satri-col>
					<!-- 警告加载中按钮 -->
					<satri-col :span="8">
						<satri-button type="warning" fill loading>警告</satri-button>
					</satri-col>
					<!-- 信息加载中按钮 -->
					<satri-col :span="8">
						<satri-button type="info" fill loading>信息</satri-button>
					</satri-col>
				</satri-row>
			</satri-card>

			<!-- 禁用按钮示例 -->
			<satri-card label="禁用">
				<satri-row :gutter="20">
					<!-- 默认禁用按钮 -->
					<satri-col :span="8">
						<satri-button disabled fill @tap="onTap">默认</satri-button>
					</satri-col>
					<!-- 主要禁用按钮 -->
					<satri-col :span="8">
						<satri-button type="primary" fill disabled>主要</satri-button>
					</satri-col>
					<!-- 成功禁用按钮 -->
					<satri-col :span="8">
						<satri-button type="success" fill disabled>成功</satri-button>
					</satri-col>
					<!-- 失败禁用按钮 -->
					<satri-col :span="8">
						<satri-button type="error" fill disabled>失败</satri-button>
					</satri-col>
					<!-- 警告禁用按钮 -->
					<satri-col :span="8">
						<satri-button type="warning" fill disabled>警告</satri-button>
					</satri-col>
					<!-- 信息禁用按钮 -->
					<satri-col :span="8">
						<satri-button type="info" fill disabled>信息</satri-button>
					</satri-col>
				</satri-row>
			</satri-card>

			<!-- 没有边框按钮示例 -->
			<satri-card label="没有边框">
				<!-- 无边框按钮 -->
				<satri-button :border="false">默认</satri-button>
			</satri-card>

			<!-- 自定义颜色按钮示例 -->
			<satri-card label="自定义颜色">
				<!-- 自定义颜色按钮 -->
				<satri-button :border="false" color="#ffffff" background-color="#008000">默认</satri-button>
				<!-- 自定义颜色朴素按钮 -->
				<satri-button color="#008000" plain>朴素</satri-button>
			</satri-card>
		</view>
	</satri-page>
</template>

<script lang="ts" setup>
	import { useUi } from "/$/satri-ui";

	const ui = useUi();

	// 点击事件处理函数
	function onTap() {
		ui.showToast("点我干嘛");
	}
</script>

<style lang="scss">
	.page-demo-button {
		.satri-col {
			padding-bottom: 20rpx;
			/* 设置每个列的底部内边距 */
		}
	}
</style>